<!--
 * @Author: wangming
 * @Date: 2021-05-08 15:24:24
 * @LastEditors: wangming
 * @LastEditTime: 2022-07-28 16:37:18
 * @Description: tab 布局
-->
<template>
  <el-tabs
    :tabPosition="config.__config.tabPosition || 'top'"
    :type="config.__config.tabtype"
    v-model="activeName"
    style="width: 100%"
    class="p10 layoutbox"
  >
    <el-tab-pane
      :label="item.label"
      :name="item.value"
      v-for="item in config.children"
      :key="item.value"
    >
      <draggable
        data-key="layout"
        :delay="50"
        :forceFallback="true"
        chosen-class="drawing-chosen"
        drag-class="drawing-drag"
        @add="(v) => handleAdd(v, item.children)"
        class="drawing-board tabpane p10"
        group="form"
        :animation="200"
        :list="item.children"
        tag="el-row"
      >
        <slot v-bind:list="item.children"></slot>
      </draggable>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import mixins from "./mixins.js";
export default {
  mixins: [mixins],
  data() {
    return {
      activeName: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.activeName = this.config.children[0]?.value;
    },
  },
};
</script>

<style lang="scss" scoped>
.tabpane {
  min-height: 100px;
}
</style>
